<template>
  <li class="item-box">
    <div class="top cursor-pointer" @click="toCompany">
      <div class="avatar">
        <img :src="data?.logoVisitUrl" :alt="data?.abbreviation" />
      </div>
      <div class="right-box">
        <div class="name truncate">{{ data?.name }}</div>
        <div class="sub-name">
          {{ data?.isListed ? `已上市  |  ` : '' }}{{ data?.scaleCodeName }} 丨
          {{ data?.industryName }}
        </div>
      </div>
    </div>
    <div class="bottom" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
      <div>
        <div class="div1">热招</div>
        <div class="line"></div>
        <div class="scroll-box">
          <ul :class="{ animate: animate }">
            <li v-for="(item, index) in jobs" :key="index">
              <div class="max-196 link" @click="onPosDetail(item?.id)">
                {{ item?.positionName }}
              </div>
              <div class="max-85">
                {{ makeUnitStr(item) }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </li>
</template>

<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { makeUnitStr } from '@/utils/util';
import { useRouter } from 'vue-router';
import _ from 'lodash';

const props = defineProps(['data', 'interval']);
const router = useRouter();
const animate = ref(false);
const jobs = computed(() => props.data?.jobInfoBos || []);
let interval: any;

function scroll() {
  animate.value = true;
  setTimeout(() => {
    jobs.value.push(jobs.value[0]);
    jobs.value.shift();
    animate.value = false;
  }, 500);
}

function toCompany() {
  router.push(`/company/${props.data?.id}`);
}

function onPosDetail(id: any) {
  router.push(`/position/${id}`);
}

const onMouseEnter = _.debounce(() => {
  clearInterval(interval);
}, 100);

const onMouseLeave = _.debounce(() => {
  intervalFunc();
}, 100);

function intervalFunc() {
  if (jobs.value?.length <= 1) {
    return;
  }
  interval = setInterval(scroll, (Math.random() * props.interval + 1 + 1) * 1000);
}

onMounted(() => {
  intervalFunc();
});

onUnmounted(() => {
  clearInterval(interval);
});
</script>

<style lang="scss" scoped>
.item-box {
  height: 120px;
  background: #ffffff;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 1px 10px 0 #d0cbcc80;
  @apply rounded-8px bg-white flex-1 min-w-[30%] max-w-386.67px overflow-hidden;
  .top {
    height: 70px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 13px;
    padding-right: 13px;
    display: flex;
    background: linear-gradient(90deg, #eef4fd, #fffef6);
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 8px;
      box-shadow: 0px 1px 3px 0px rgba(151, 170, 216, 0.66);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right-box {
      @apply flex-1 overflow-hidden;
        .name {
        font-size: 14px;
        font-weight: 400;
        color: #222222;
        line-height: 15px;
        margin-bottom: 10px;
      }
      .sub-name {
        font-size: 12px;
        font-weight: 400;
        color: #757575;
        line-height: 12px;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
    > div {
      z-index: 2;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20px;
      height: 100%;
    }
    .div1 {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 18px;
    }

    .line {
      width: 1px;
      height: 12px;
      background-color: #666666;
      margin: 0 15px;
      display: block;
    }
    .max-196 {
      max-width: 196px;
      font-size: 14px;
      font-family:
        PingFangSC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #1890ff;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 6px;
      z-index: 2;
    }
    .max-85 {
      max-width: 85px;
      font-size: 14px;
      font-weight: 700;
      color: #d20808;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      @apply float-right ml-auto;
    }
  }

  .scroll-box {
    overflow: hidden;
    flex: 1;
    height: 18px;
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    .animate {
      transition: all 0.5s;
      margin-top: -18px;
    }
    li {
      display: flex;
      align-items: center;
      height: 18px;
      line-height: 18px;
    }
  }
}
</style>
